<!-- 编辑产品 -->
<template>
  <div class='bgff h100 pd pt10 dfgfdgtrt'>
    <p class="title-label">{{ isbj ? '编辑' : '新增' }}产品</p>

    <div class="mt20 sdfgdgdfyt">
      <n-form ref="formRef" label-width="120" :model="form" :rules="rules" :inline="false" size="normal"
        label-placement="left">
        <n-grid :cols="24" :x-gap="20">
          <n-form-item-gi span="24" label="产品标题:" path="title" class="mt20">
            <n-input v-model:value="form.title" type="text" placeholder="请输入网页标题" size="medium" clearable></n-input>
          </n-form-item-gi>
          <n-form-item-gi span="12"  label="产品分类:" class="mt20">
        
            <n-select v-model:value="form.fenlei" size="medium" :options="nksdlist" clearable @change="kxcferety" />
          </n-form-item-gi>
          <n-form-item-gi span="12" label="" class="mt20" v-if="nksdlistb.length>0">
            <n-select v-model:value="form.fenleib" size="medium" :options="nksdlistb" clearable />
          </n-form-item-gi>
          <n-form-item-gi span="24" path="profession" label="应用行业" class="mt20" >
            <n-select v-model:value="form.profession" size="medium" :options="nksdlistc" clearable />
          </n-form-item-gi>
          <n-form-item-gi span="8" label="封面:" path="cover" class="mt20">
            <div class="logo-context vertical-center pr" @click="photoShowModal = true">
              <img :src="form.cover" class="w100 h100 imgjz" v-if="form.cover" />
              <span v-else>点击上传产品封面</span>
              <i class="iconfont dx-closefill sdfddfsrtxer" v-if="form.cover" @click.stop="form.cover = ''"> </i>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="16" label="应用案例:"  class="mt20">
            <div class="logo-context vertical-center pr ac" @click="photoShowModaler = true">
              <img :src="form.jiesaoc" class="w100 h100 imgjz" v-if="form.jiesaoc" />
              <span v-else>点击上传应用案例</span>
              <i class="iconfont dx-closefill sdfddfsrtxer" v-if="form.jiesaoc" @click.stop="form.jiesaoc = ''"> </i>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="产品优势:" class="mt20">
            <div class="fwbclass ">
              <tinymce ref="tinymceref"></tinymce>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="技术参数:" class="mt20">
            <div class="fwbclass ">
              <tinymce ref="tinymcerefer"></tinymce>
            </div>
          </n-form-item-gi>
          <n-form-item-gi span="24" label="&nbsp;" class="mt20 pm20">
            <n-button type="primary" size="medium" @click="baocun">保存</n-button>
            <n-button size="medium" class="ml20" @click="callBack">返回上一页</n-button>
          </n-form-item-gi>
        </n-grid>
      </n-form>
    </div>
    <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>产品封面</div>
      </template>
      <div>
        <photoGallery @getImg="getImg" types="金纬机械产品封面"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>


    <n-modal v-model:show="photoShowModaler" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>应用案例</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="金纬机械应用案例"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang='ts' setup>
import { ref,nextTick } from "vue"
import { dxget, dxpost, callBack, qurl } from "../../util/index";
import photoGallery from "../../components/util/photoGallery";
import tinymce from "../../components/util/tinymce.vue"
const apiUrl = "jwzz/product"
const photoShowModal = ref(false)
const photoShowModaler = ref(false)
const tinymceref = ref()
const tinymcerefer= ref()
const formRef = ref()
const roleId= localStorage.id
const cz = qurl()
const isbj = ref(false)
let kxcfsdf  = []
if (cz.id) {
  isbj.value = true
}
const form = ref({
  title: "",
  fenlei: "",
  fenleib:"",
  profession:"",
  cover: "",
  jiesaoa:"",
  jiesaob:"",
  jiesaoc:"",
})
const nksdlist = ref([])
const nksdlistb = ref([])
const nksdlistc = ref([])
const rules = {
  title: {
    required: true,
    message: '请输入产品标题',
    trigger: 'blur'
  }, fenlei: {
    required: true,
    message: '请选择产品分类',
    trigger: 'blur'
  }, cover: {
    required: true,
    message: '请上传产品封面',
    trigger: 'blur'
  }
}
const getwnewion = async () => {
  const { data }: any = await dxget("dxgjAdmin/getzd", { name: 'applicationIndustry' })
  nksdlistc.value = data
}
getwnewion()
const getfls = async()=>{
    const {data}:any = await dxget("dxgjAdmin/getfls",{roleId})
    console.log(data);
    kxcfsdf = data
    data.map(a=>{
      nksdlist.value.push({
        label:a.cate_name,
        value:''+a.id
      })
    })
}

const kxcferety = (data)=>{
  form.value.fenleib = ""
  nksdlistb.value = []
  const children=  kxcfsdf.filter(a=>a.id==data)[0].children
  children.map(a=>{
    nksdlistb.value.push({
        label:a.cate_name,
        value:''+a.id
      })
  })
}


let kjsser = ""
const getImg = (data) => {
  kjsser = data
}
const setImg = () => {
  form.value.cover = kjsser
  photoShowModal.value = false
}

let kjsserer = ""
const getImger = (data) => {
  kjsserer = data
}
const setImger = () => {
  form.value.jiesaoc = kjsserer
  photoShowModaler.value = false
}


const initData = async () => {
  const { data }: any = await dxget(apiUrl, { id: cz.id })
  await getfls()
  await kxcferety(data.fenlei)
  form.value = data
  nextTick(() => {
    tinymceref.value.setContent(data.jiesaoa)
    tinymcerefer.value.setContent(data.jiesaob)
  })
}
if (cz.id) {
  initData()
}else{
  getfls()
}
const baocun = () => {
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      const fwbtext = tinymceref.value.getContent().trim()
      const jiesaob = tinymcerefer.value.getContent().trim()
      if (!fwbtext) {
        window.$message.error("请输入产品优势")
        return
      }
      if (!jiesaob) {
        window.$message.error("请输入技术参数")
        return
      }
      form.value.jiesaoa = fwbtext
      form.value.jiesaob = jiesaob
      await dxpost(apiUrl, form.value,isbj.value?'put':'post')
      window.$message.success("操作成功")
      callBack()
    }
  })
}
</script>
<style scoped>
.sdfgdgdfyt {
  width: 1200px;
}

.fwbclass {
  height: 400px;
}

.dfgfdgtrt {
  overflow: auto;
}

.logo-context.ac {
  width: 600px;
  height: 150px;
}
</style>